import React from "react";

const Restored = () => {

    const navigate = React.$Router.useNavigate();

    const [finished, setFinished] = React.useState(false)

    const [list, setList] = React.useState([])

    const LoginAuth = React.$Cookies.load('LoginAuth') ? React.$Cookies.load('LoginAuth') : {}

    let productData = React.useRef([]);

    let page = React.useRef(1)

    const load = () => {
        getproductData()
    }

    const refresh = () => {
        return new Promise((resolve) => {
            setTimeout(() => {
                page.current = 1
                setList([])
                productData.current = []
                setFinished(false)
                React.$Vant.Toast.info('刷新成功')
                resolve(true)
            }, 1000);
        })
    }

    const getproductData = async () => {
        setFinished(true)

        let result = await React.$Api.ResProduct({ busid: LoginAuth.id, page: page.current })

        if (result.code === 1) {
            productData.current = productData.current.concat(result.data)
            setList(productData.current)
            page.current = page.current + 1
            setFinished(false)

        } else {
            setFinished(true)
        }
    }

    const Items = () => {
        if (list.length > 0) {
            return list.map((item, key) => {
                return (
                    <li key={key}>
                        <React.$Router.NavLink to={`/order/order/recovery?id=${item.id}`}>
                            <div className="vip_order_goods">
                                <h3>
                                    <i><img src={item.product.thumb_cdn} /></i>
                                    <dl>
                                        <dt>{item.product.name}</dt>
                                        <dd>
                                            <em>押金</em>
                                            <em>{item.rent}</em>
                                        </dd>
                                        <dd>
                                            <em>总价</em>
                                            <em>{item.price}</em>
                                        </dd>
                                        <dd>
                                            <em>结束时间</em>
                                            <em>{item.endtime_text}</em>
                                        </dd>
                                        <dd>
                                            <em>订单状态</em>
                                            <em>{item.status_text}</em>
                                        </dd>
                                    </dl>
                                </h3>
                            </div>
                        </React.$Router.NavLink>
                    </li>
                )
            })
        } else {
            return <React.$Vant.Empty image="search" description="暂无数据" />
        }
    }

    return (
        <>
            <React.$Vant.NavBar
                title="可归还商品"
                leftText="返回"
                onClickLeft={() => (navigate(-1))}
            />

            <React.$Vant.PullRefresh onRefresh={refresh} >
                <React.$Vant.List className="vip_user_order" onLoad={load} finished={finished}>
                    <ul>
                        {Items()}
                    </ul>
                </React.$Vant.List>
            </React.$Vant.PullRefresh>
        </>
    )
}

export default Restored;